{% extends 'base.html' %}

{% block out_body %}
    <div id="app">
        {% verbatim myblock %}
            <el-form size="small" :model="searchForm" ref="searchForm" inline style="margin-top: 6px">
                <el-form-item label="用户姓名" prop="first_name">
                    <el-input v-model="searchForm.first_name" placeholder="请输入用户姓名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" @click="get_table_data">查询</el-button>
                    <el-button type="warning" @click="handleReset">重置</el-button>
                </el-form-item>
            </el-form>
            <div>
                <el-button type="primary" size="small" @click="handleAdd">添加</el-button>
                <el-button type="danger" size="small" v-if="multipleSelection.length !== 0" @click="handleDelete(multipleSelection.map(item=>item.id))">批量删除</el-button>
            </div>
            <el-table
                    :data="tableData"
                    border
                    size="small"
                    height="calc(100% - 144px)"
                    style="width: 100%;margin-top: 12px"
                    :header-cell-style="{backgroundColor:'#f5f7fa'}"
                    @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        fixed
                        align="center"
                        width="40">
                </el-table-column>
                <el-table-column
                        prop="id"
                        fixed
                        align="center"
                        label="用户ID"
                        width="60">
                </el-table-column>
                <el-table-column
                        label="头像"
                        align="center"
                        width="100">
                    <template slot-scope="scope">
                        <el-image style="height: 48px" :src="scope.row.ava === null?`/static/img/无头像.png`:`/static/source/${scope.row.ava}`"></el-image>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="username"
                        label="账号">
                </el-table-column>
                <el-table-column
                        prop="first_name"
                        label="姓名">
                </el-table-column>
                <el-table-column
                        prop="phone"
                        label="手机号码">
                </el-table-column>
                <el-table-column
                        prop="email"
                        label="邮箱">
                </el-table-column>
                <el-table-column
                        prop="sex"
                        label="性别">
                    <template slot-scope="scope">
                        {{ scope.row.sex === 1?"男":"女" }}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="is_active"
                        label="是否启用"
                        align="center"
                        width="90">
                    <template slot-scope="scope">
                        <el-switch
                                :disabled="scope.row.username === 'admin'"
                                @change="(val)=>handleChangeIsActive(val,scope.row.id)"
                                v-model="scope.row.is_active"
                                active-color="#13ce66"
                                inactive-color="#ff4949">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="120"
                        fixed="right"
                        align="center">
                    <template slot-scope="scope">
                        <el-button type="text" style="color: #E6A23C" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button v-if="scope.row.username !== 'admin'" type="text" style="color: #F56C6C" @click="handleDelete([scope.row.id])">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="text-align: center">
                <el-pagination
                        @size-change="handleSizeChange"
                        style="text-align:center;margin-top:12px"
                        background
                        @current-change="handleCurrentChange"
                        :current-page="page.page_index"
                        :page-size="page.page_size"
                        :page-sizes="[30,50,100,200]"
                        layout="total, sizes, prev, pager, next"
                        :total="page.total">
                </el-pagination>
            </div>
            <el-dialog
                    :title="title"
                    :visible.sync="dialogVisible"
                    custom-class="pub_dialog"
                    width="30%">
                <el-form size="small" :model="form" ref="form" label-width="100px">
                    <el-form-item label="账号" prop="username" :rules="[{required:true,'message':'请输入账号',trigger:'blur'}]">
                        <el-input :disabled="title !== '添加'" v-model="form.username" placeholder="请输入账号"></el-input>
                    </el-form-item>
                    <el-form-item label="用户姓名" prop="first_name" :rules="[{required:true,'message':'请输入用户姓名',trigger:'blur'}]">
                        <el-input v-model="form.first_name" placeholder="请输入用户姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="sex" :rules="[{required:true,'message':'请选择性别',trigger:'change'}]">
                        <el-radio-group v-model="form.sex" size="small">
                            <el-radio-button :label="1">男</el-radio-button>
                            <el-radio-button :label="2">女</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="手机号码" prop="phone" :rules="[{required:true,'message':'请输入手机号码',trigger:'blur'}]">
                        <el-input v-model="form.phone" placeholder="请输入手机号码"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email" :rules="[{required:true,'message':'请输入邮箱',trigger:'blur'}]">
                        <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
                    </el-form-item>
                    <el-form-item label="用户类型" prop="is_superuser" :rules="[{required:true,'message':'请选择用户类型',trigger:'change'}]">
                        <el-radio-group v-model="form.is_superuser" size="small">
                            <el-radio-button :label="1">管理员</el-radio-button>
                            <el-radio-button :label="2">会员</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="form.password" placeholder="请输入密码，留空默认初始密码为123"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button size="small" type="warning" @click="handleSubmit">提交</el-button>
                  </span>
            </el-dialog>
        {% endverbatim myblock %}
    </div>
{% endblock %}

{% block out_script %}
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    url: {
                        sea: "/ad/userlist/",
                        add: '/ad/add_user/',
                        del: '/ad/delete_user/',
                        edit: '/ad/update_user/',
                    },
                    searchForm: {
                        first_name: "",
                    },
                    tableData: [],
                    multipleSelection: [],
                    page: {
                        page_index: 1,
                        page_size: 30,
                        total: 0,
                    },
                    title: "",
                    form: {
                        first_name: "",
                        sex: "",
                        phone: "",
                        type: "",
                        username: "",
                        is_superuser: 2,
                        email: "",
                        password: "",
                    },
                    dialogVisible: false
                }
            },
            methods: {
                // 查询
                get_table_data() {
                    axios.post(this.url.sea, {...this.searchForm, ...this.page}).then(res => {
                        let {code, data, msg} = res.data
                        if (code === 0) {
                            this.tableData = data.data
                            console.log(this.tableData)
                            this.page.total = data.total
                        } else {
                            this.$message.error(msg)
                        }
                    })
                },
                // 重置查询表单
                handleReset() {
                    this.$refs.searchForm.resetFields()
                    this.page.page_index = 1
                    this.get_table_data()
                },
                // 添加
                handleAdd() {
                    this.dialogVisible = true
                    this.title = '添加'
                    this.$nextTick(() => {
                        this.$refs.form.resetFields()
                    })
                },
                // 编辑
                handleEdit(row) {
                    this.dialogVisible = true
                    this.title = '编辑'
                    this.$nextTick(() => {
                        this.form = JSON.parse(JSON.stringify(row))
                        this.form.password = ""
                    })
                },
                // 删除
                handleDelete(idlist) {
                    this.$confirm('此操作将永久删除所选记录, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.post(this.url.del, {idlist: idlist}).then(res => {
                            let {code, data, msg} = res.data
                            if (code === 0) {
                                this.get_table_data()
                                this.$message.success(msg)
                            } else {
                                this.$message.error(msg)
                            }
                        })
                    }).catch(() => {

                    });
                },
                // 提交
                handleSubmit() {
                    this.$refs.form.validate((valid) => {
                        if (valid) {
                            axios.post(this.title === '添加' ? this.url.add : this.url.edit, {...this.form}).then(res => {
                                let {code, data, msg} = res.data
                                if (code === 0) {
                                    this.get_table_data()
                                    this.dialogVisible = false
                                    this.$message.success(msg)
                                } else {
                                    this.$message.error(msg)
                                }
                            })
                        }
                    })
                },
                // 改变每页显示条数
                handleSizeChange(val) {
                    this.page.page_size = val
                    this.get_table_data()
                },
                // 显示第几页
                handleCurrentChange(val) {
                    this.page.page_index = val
                    this.get_table_data()
                },
                // 表格多选时
                handleSelectionChange(val) {
                    this.multipleSelection = val;
                },
                handleChangeIsActive(val, id) {
                    this.$confirm(`是否${val === 1 ? '启用' : '禁用'}该账号？`, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.post(this.url.edit, {id: id, is_active: val}).then(res => {
                            let {code, data, msg} = res.data
                            if (code === 0) {
                                this.get_table_data()
                                this.$message.success(msg)
                            } else {
                                this.$message.error(msg)
                            }
                        })
                    }).catch(() => {
                        this.get_table_data();
                    });
                }
            },
            mounted() {
                this.get_table_data()
            }
        })
    </script>
{% endblock %}


{% block out_css %}
    <style>
        #app {
            width: 100%;
            height: 100%;
            padding: 12px;
            box-sizing: border-box;
        }
    </style>
{% endblock %}
